<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="header">
        <h1>可互动 3D 网格</h1>
    </div>
    <div class="show-scroll"></div>
    <div class="container">
        <ul class="list">
            <!-- <li class="item">
                <div class="img-wraper">
                    <img src="./1.jpg" alt="">
                    <img src="./2.png" alt="">
                    <img src="./3.png" alt="">
                </div>
            </li> -->
        </ul>
    </div>
    <div class="ink">
        <img src="./ink.png" alt="">
    </div>


    <script>

        const listEl = document.querySelector('.list')
        const showScroll = document.querySelector('.show-scroll')

        let max = 60
        let lie = 3
        const itemWidth = 300

        // 自动添加li
        for (let i = 0; i < max; i++) {
            const li = document.createElement('li')
            li.className = 'item'

            li.innerHTML = `
                <div class="img-wraper">
                    <img src="./1.jpg" alt="">
                    <img src="./2.png" alt="">
                    <img src="./3.png" alt="">
                </div>
            `
            listEl.appendChild(li)
        }


        document.querySelector('img').onload = function(){
            const row = Math.ceil(max / lie)
            const bei = itemWidth / this.offsetWidth
            const h = bei * this.offsetHeight

            showScroll.style.height = (row * h + window.innerHeight) + 'px'
        }

        document.onscroll = function(e){
            console.log(1);
            listEl.style.transform = `translate3d(0, ${-window.scrollY}px, 0)`

        }


    </script>

</body>
</html>